<template>
  <div class="container" ref="mainCon">
    <div class="mainCon">
      <!-- <div class="unRealNameMain">
                <div class="header">
                    <div class="headerBox">
                        <el-button
                            type="primary"
                            class="funComBut saveBtn"
                            @click="toAdd">
                            {{(isYcUser() || isYiLingUser())?'添加监察员':'添加网格'}}
                        </el-button>
                    </div>
                </div>
            </div> -->
      <!-- <div class="spacing"></div> -->
      <!-- 表格 -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <el-button type="primary" class="funComBut saveBtn" @click="toAdd">
            {{ isYcUser() || isYiLingUser() ? '添加监察员' : '添加网格' }}
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column align="center" prop="name" label="网格名称" :formatter=formatTd></el-table-column> -->
          <el-table-column
            :label="isYcUser() || isYiLingUser() ? '乡镇名称' : '网格名称'"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.name"
                :columnName="'name'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="userName"
            :label="isYcUser() || isYiLingUser() ? '监察员' : '网格管理员'"
            :formatter="formatTd"
          ></el-table-column>
          <!-- <el-table-column align="center" prop="remark" label="备注" :formatter=formatTd></el-table-column> -->
          <el-table-column label="备注" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="操作"
            fixed="right"
            width="130px"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toUpdate(scope.row)"
                >修改</el-link
              >
              <el-link type="primary" @click="toDel(scope.row)">删除</el-link>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- 分页 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="640px"
        :modal-append-to-body="false"
      >
        <el-form
          :model="dialogForm"
          ref="dialogForm"
          :rules="dialogRules"
          label-width="120px"
          style="padding-top: 8px"
        >
          <el-form-item
            :label="isYcUser() || isYiLingUser() ? '乡镇名称：' : '网格名称：'"
            prop="name"
          >
            <el-input
              class="mWidth"
              v-model="dialogForm.name"
              maxlength="50"
              show-word-limit
              :placeholder="
                isYcUser() || isYiLingUser()
                  ? '请输入乡镇名称'
                  : '请输入网格名称'
              "
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="isYcUser() || isYiLingUser() ? '监察员：' : '网格管理员：'"
            prop="userId"
          >
            <el-select
              clearable
              v-model="dialogForm.userId"
              placeholder="请选择"
              class="mWidth"
            >
              <el-option
                v-for="(item, index) of usersOptions"
                :key="index"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              v-model="dialogForm.remark"
              type="textarea"
              placeholder="请输入内容"
              maxlength="50"
              rows="3"
              class="mWidth"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="toSave"
            class="save"
            :loading="canSave"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'gridManagerList',
  data() {
    return {
      requestUrl: 'api-p/grid/expand/gridList', //表格请求路径
      date: [], //申请日期
      loading: true,
      isShow: false,
      tableData: [], //表格数据
      filterField: {},
      pageSize: 20,
      pageNo: 1,
      isShowDetail: '',
      dialogVisible: false,
      dialogTitle: '添加网格',
      formLabelWidth: '100px',
      dialogForm: {
        name: '',
        userId: '',
        remark: '',
      },
      usersOptions: [],
      dialogRules: {
        name: [
          {
            required: true,
            message:
              this.isYcUser() || this.isYiLingUser()
                ? '乡镇名称不能为空'
                : '网格名称不能为空',
            trigger: 'blur',
          },
        ],
        userId: [
          {
            required: true,
            message:
              this.isYcUser() || this.isYiLingUser()
                ? '监察员不能为空'
                : '网格管理员不能为空',
            trigger: 'blur',
          },
        ],
      },
      canSave: false,
      saveOrUpdate: '',
      gridId: '',
      hiddleToolBar: false,
      tableHeight: null,
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }
      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.pageSize = 20
      this.pageNo = 1
      this.$refs.pagination.getTableListData()
    },
    selectGridUser(id) {
      this.axios({
        method: 'post',
        url: '/api-p/grid/expand/selectGridUser',
        data: { id: id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.usersOptions = response.data.result
          }
        })
        .catch((error) => {})
    },
    toAdd() {
      this.selectGridUser()
      this.dialogTitle =
        this.isYcUser() || this.isYiLingUser() ? '添加监察员' : '添加网格'

      this.saveOrUpdate = 'Add'
      this.dialogVisible = true
      this.dialogForm.name = ''
      this.dialogForm.userId = ''
      this.dialogForm.remark = ''
    },
    //跳转详情页面
    toUpdate(row) {
      this.selectGridUser(row.id)
      this.dialogTitle =
        this.isYcUser() || this.isYiLingUser() ? '修改监察员' : '修改网格信息'
      this.saveOrUpdate = 'Update'
      this.dialogVisible = true
      this.gridId = row.id
      this.dialogForm.name = row.name
      this.dialogForm.userId = row.userId
      this.dialogForm.remark = row.remark
    },
    toDel(row) {
      let delInfo =
        '删除后，该条网格信息所对应的项目将恢复成为未指定网格管理员状态！'
      let delTitle = '删除网格信息'
      if (this.isYcUser() || this.isYiLingUser()) {
        delInfo = '删除后，该条监察员所对应的项目将恢复成为未指定监察员状态！'
        delTitle = '删除监察员'
      }
      this.$confirm(delInfo, delTitle, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    delete(row) {
      this.axios({
        method: 'post',
        url: 'api-p/grid/expand/deleteGrid',
        data: { id: row.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '删除成功',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    toSave() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.canSave = true
          if (this.saveOrUpdate === 'Update') {
            this.dialogForm.id = this.gridId
          }
          this.axios({
            method: 'post',
            url: 'api-p/grid/expand/saveOrUpdate',
            data: this.dialogForm,
          })
            .then((response) => {
              this.canSave = false
              if (!response.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '保存成功',
                })
                this.dialogVisible = false
                this.$refs.pagination.getTableListData()
              } else {
                this.$message({
                  type: 'error',
                  message: response.data.errorMsg,
                })
              }
            })
            .catch((error) => {})
        } else {
          return false
        }
      })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 175
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 218

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding-top: 0;
}
.unRealNameMain {
  // padding: 24px;
  padding-right: 24px;
  .header {
    padding-bottom: 24px;
    min-height: 60px;
    text-align: left;
    line-height: 36px;
    position: relative;
    &Tips {
      display: block;
      width: calc(100% - 240px);
      font-size: 14px;
      color: #333333;
    }
    &Box {
      position: absolute;
      right: 0;
      top: 0;
      height: 36px;
    }
    .el-button {
      line-height: 36px;
      height: 36px;
      // vertical-align: middle;
      img {
        vertical-align: sub;
      }
    }
  }
}
.selectWidth {
  width: 100%;
}
@import '../../../static/css/filterArea.less';
</style>
